<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>局放首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<style>
    .layui-top-box {
        padding: 10px 10px 1px 10px;
        color: #fff
    }

    .panel {
        margin-bottom: 10px;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
    }

    .panel-body {
        padding: 15px
    }

    .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 14px;
        color: inherit
    }

    .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
        margin-top: .3em;
    }

    .layui-red {
        color: red
    }

    .main_btn>p {
        height: 40px;
    }

    /* icon */
    .icon {
        margin-right: 10px;
        color: #1aa094;
    }

    .layuimini-container_hf {
        border: 1px solid #f2f2f2;
        border-radius: 5px;
    }

    .bt_h {
        height: 1.7rem;
        display: block;
        text-align: center;
    }

    .bt_i {
        background-color: #F7F7F7;
        width: auto;
        font-size: 0.9rem !important;
        margin-bottom: 3px;
    }

    .bt_hover:hover {
        background-color: #179C9B !important;
        color: #fff;
    }


    label b {
        margin: 10px;
    }

    #Myloading {
        z-index: 10;
    }

    .layui-table tr th,
    td {
        white-space: nowrap;
        padding: 5px;
        text-align: center;
        width: 33.4%;
    }

    ;
</style>

<body>
    <div class="layuimini-container_hf">
        <div class="layuimini-main">
            <div id="Myloading"><img src="../../lib/layui-v2.5.5/css/modules/layer/default/loading-01.gif" alt=""></div>
            <div class="layui-row layui-col-space15">
                <!-- 左边8分 -->
                <div class="layui-col-md6">
                    <div class="layui-row layui-col-space15">
                        <!-- 左1 评估报告下载 -->
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header"><i class="fa fa-plug icon"></i><span
                                        class="title_report"></span></div>
                                <div class="layui-card-body">
                                    <div class="welcome-module">
                                        <div class="layui-row layui-col-space10" style="text-align: center;">
                                            <img id="img_dynamic" height="200px" alt="">
                                        </div>
                                        <p style="font-size: 18px;margin-left: 20%;">状态评估报告 ：<span
                                                id="Down_report"></span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 左2 健康评分 -->
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div style="margin-left: 33%;" class="layui-card-header"><i
                                        class="fa fa-sun-o icon"></i><span>健康评分</span></div>
                                <div class="layui-card-body">
                                    <div class="welcome-module">
                                        <div class="layui-row layui-col-space10">
                                            <!-- <div class="layui-card top-panel"  style="margin-left: -40px !important;"> -->
                                            <div id="echarts-pies" style="min-height:225px;"></div>
                                            <!-- </div> -->
                                        </div>
                                        <!-- <p style="font-size: 18px;margin-left: 26%;">状态评估报告 ：<button class="layui-btn layui-btn-xs data-count-edit" style="margin-bottom: 2px;">下载</button></p> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右边4分 -->
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div style="margin-left: 33%;" class="layui-card-header"><i
                                class="fa fa-pie-chart icon"></i><span>状态评价权重表</span></div>
                        <div class="layui-card-body" style="margin-left: -20%;">
                            <div class="welcome-module">
                                <div class="layui-row layui-col-space10">
                                    <div id="echarts-BY" style="min-height:225px;"></div>
                                </div>
                                <!-- <p style="font-size: 18px;margin-left: 26%;">状态评估报告 ：<button class="layui-btn layui-btn-xs data-count-edit" style="margin-bottom: 2px;">下载</button></p> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15">
                <!-- 上栅格已经12份了 -->
                <div class="layui-col-md12 ">
                    <div class="layui-card">
                        <div style="margin-left: 40%;" class="layui-card-header"><i
                                class="fa fa-cubes icon"></i><span>评分及单部件详情</span></div>
                        <div class="layui-card-body">
                            <div class="welcome-module">
                                <div class="layui-row layui-col-space10" id="report_start" style="margin-bottom: 20px;">
                                </div>
                                <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>

    <script>
        layui.use(['table', 'miniTab', 'echarts'], function () {

            var token = sessionStorage.getItem('newtoken');
            var report_code = sessionStorage.getItem('HsaveReport_code');
            var report_type = sessionStorage.getItem('HsaveReport_type');
            var report_text = sessionStorage.getItem('HsaveReport_text');
            var report_textType = sessionStorage.getItem('HsaveReport_text');

            var $ = layui.jquery,
                miniTab = layui.miniTab,
                echarts = layui.echarts,
                table = layui.table;
            miniTab.listen();
            // 饼图
            var echartsBY = echarts.init(document.getElementById('echarts-BY'), 'walden');
            // 点击  切出表格 
            $(document).on('click', '#report_start .bt_hover', function () {
                // var device_code = this.dataset.device;
                var num = this.dataset.num;
                get_table(report_code, num);
            });
            // 点击  下载评估报告
            $(document).on('click', '#report_dwon', function () {
                var url = '/oms-web/imexport/' + report_code + '/' + report_type + '/authority?token=' + token;
                window.open(url, '_blank');//新窗口打开
            });
            $("#Down_report").append('<button class="layui-btn layui-btn-xs data-count-edit" id="report_dwon" style="margin-bottom: 2px;">下载</button>');
            // 标题
            $('.title_report').text(report_text);

            // 获取设备termNumber号
            // $.ajax({
            //     url: '/oms-web/candt/getterminals-nt?deviceCode=' + report_code + '&token=' + token,
            //     dataType: "json",
            //     type: "get",
            //     async: false,
            //     contentType: "application/json",
            //     success: function (data) {
            //         if (data.code == -1) {
            //             window.location = '../login-1.html'
            //         }
            //         var arr = [];
            //         if (data.code === 0) {
            //             for (let i = 0; i < data.data.length; i++) {
            //                 var device_code = data.data[i].deviceCode;
            //                 var termNumber = data.data[i].termNumber;
            //                 var text = data.data[i].text;
            //                 if (text.search("评估诊断") != -1) {
            //                     getPointTable(device_code, termNumber);
            //                 };
            //                 arr.push(text);
            //             };
            //             //   arr.indexOf(report_textType+'-评估诊断') != -1 ? '' : layer.msg('该终端暂无评分值及相关信息！');
            //             // 判断数据是否为空  空/置灰 非空/提供下载
            //             if (arr.indexOf(report_textType + '-评估诊断') != -1) {
            //                 $("#Down_report").append('<button class="layui-btn layui-btn-xs data-count-edit" id="report_dwon" style="margin-bottom: 2px;">下载</button>')
            //             } else {
            //                 $("#Down_report").append('<button class="layui-btn layui-btn-xs data-count-edit layui-btn-disabled" style="margin-bottom: 2px;">暂无数据</button>')
            //                 layer.msg('该终端暂无评分值及相关信息！');
            //             }
            //             // console.log(index) //结果是2

            //         };
            //     }, error: function () {
            //         layer.msg('数据出错！')
            //     }
            // });

            // // 获取点表
            // function getPointTable(device_code, termNumber) {
            //     $.ajax({
            //         url: '/oms-web/point-table/getPointTable?deviceCode=' + device_code + '&termNo=' + termNumber + '&token=' + token,
            //         dataType: "json",
            //         type: "POST",
            //         async: false,
            //         contentType: "application/json",
            //         success: function (data) {
            //             if (data.code == -1) {
            //                 window.location = '../login-1.html'
            //             }
            //             if (data.code === 0) {
            //                 var real_code = [];
            //                 for (let i = 0; i < data.data.telemeterings.length; i++) {
            //                     real_code.push(data.data.telemeterings[i].code)
            //                 }
            //                 real_time(real_code);
            //             };
            //         }, error: function () {
            //             layer.msg('数据出错！')
            //         }
            //     });
            // }
            // // 获取实时值
            // function real_time(real_code) {
            //     $.ajax({
            //         url: '/oms-web/real-time/dataplus-authority?token=' + token,
            //         dataType: "json",
            //         type: "POST",
            //         data: JSON.stringify(real_code),
            //         contentType: "application/json",
            //         success: function (data) {
            //             if (data.code == -1) {
            //                 window.location = '../login-1.html'
            //             }
            //             var report_text = '';
            //             for (let i = 0; i < data.data.length; i++) {
            //                 //    拼接  分数
            //                 report_text += '<span  style="height: 100%;float: left;"><label data-device="' + data.data[i].devicename + '" data-num="' + i + '" class="bt_h bt_i bt_hover"><b>' + data.data[i].describes + '</b></label><label class="bt_h bt_i">' + data.data[i].value + '</label></span>'
            //                 // 筛选出总分
            //                 if (data.data[i].describes.search("总分") != -1) {
            //                     examination(data.data[i]);
            //                 }
            //             };
            //             //    默认展开表格  0  全选
            //             get_table(data.data[0].devicename, 0);
            //             $('#report_start').html(report_text);
            //         }, error: function () {
            //             layer.msg('数据出错！')
            //         }
            //     })
            // }
            // 获取分数 xdhlp04601
            real_time_s(report_code);
            function real_time_s(real_code) {
                $.ajax({
                    // url: '/oms-web/real-time/xdhlp04601/health?token=' + token,
                    url: '/oms-web/real-time/' + real_code + '/health?token=' + token,
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json",
                    success: function (data) {
                        if (data.code == -1) {
                            window.location = '../login-1.html'
                        }
                        var report_text = '';
                        if (data.data != null) {
                            for (let i = 0; i < data.data.length; i++) {
                                //    拼接  分数
                                report_text += '<span  style="height: 100%;float: left;"><label data-device="' + data.data[i].name + '" data-num="' + i + '" class="bt_h bt_i bt_hover"><b>' + data.data[i].describe + '</b></label><label class="bt_h bt_i">' + data.data[i].value + '</label></span>'
                                // 筛选出总分
                                examination(data.data[i]);
                            };
                            //    默认展开表格  0  全选
                            $('#report_start').html(report_text);
                            get_table(report_code, 0);
                        } else {
                            layer.msg('暂无数据！');
                        }

                    }, error: function () {
                        layer.msg('数据出错！')
                    }
                })
            }
            // echarts 圆环
            function examination(data) {
                var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
                var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                        offset: 0,
                        color: '#a0f1ea'
                    },
                    {
                        offset: 0.62,
                        color: '#ef33b1'
                    },

                    {
                        offset: 1,
                        color: '#eebd89'
                    }
                ]);

                var option = {
                    series: [
                        {
                            name: '统计图',
                            type: 'gauge',
                            z: 3,
                            min: 0,
                            max: 100,
                            splitNumber: 10,
                            radius: '75%',
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    width: 14,
                                    color: [
                                        [1, axislineColor]
                                    ],
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                distance: -50,
                                textStyle: {
                                    color: '#333333',
                                    fontSize: 12,
                                    fontWeight: 500
                                }
                            },
                            splitLine: { // 分隔线
                                show: false
                            },
                            title: {
                                offsetCenter: [0, 18],
                                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    color: 'white',
                                    fontSize: 20
                                }
                            },
                            detail: {
                                offsetCenter: [0, 100],
                                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    color: '#333',
                                    fontSize: 20,
                                    fontWeight: 500,
                                    bottom: 50
                                },
                                formatter: function (value) {
                                    // return "总分"+value+"</br>"+"dd"
                                    return `总分:${value}`;
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: "#6cc6cb",
                                }
                            },
                            data: [{
                                value: data.value,
                                name: ''
                            }]
                        },
                        {
                            name: '',
                            type: 'gauge',
                            z: 2,
                            min: 0,
                            max: 100,
                            splitNumber: 10,
                            radius: '70%',
                            axisLine: {            // 坐标轴线
                                show: false,
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    width: 0,
                                    color: [
                                        [1, axislineColor]
                                    ],
                                }
                            },
                            title: {
                                show: false
                            },
                            detail: {
                                show: false
                            },
                            axisTick: {
                                show: true,
                                length: 12,
                                lineStyle: {
                                    width: 1,
                                    color: '#979797'
                                }
                            },
                            axisLabel: {
                                show: false
                            },
                            splitLine: { // 分隔线
                                show: false
                            }
                        }
                    ]
                };
                echartsPies.setOption(option);
            }
            // 表格
            function get_table(device_code, num) {
                table.render({
                    elem: '#currentTableId',
                    url: '/oms-web/diagnosis/Authority/' + device_code + '/' + num + '?token=' + token,
                    cols: [[
                        { type: 'numbers', width: 70, title: '序号', align: "center" },
                        { field: 'stateValueType', width: 180, title: '状态量分布	', align: "center" },
                        { field: 'stateValueName', width: 210, title: '状态量名称', align: "center" },
                        { field: 'standardRequirements', width: 310, title: '标准要求	', align: "center" },
                        { field: 'solution', width: 210, title: '解决方案', align: "center" },
                        { field: 'partName', width: 180, title: '部件', align: "center" },
                        { field: 'deductMarks', width: 80, title: '扣分值', align: "center" },
                        // { title: '操作', width: 250, templet: '#currentTableBar', fixed: "right", align: "center" }
                    ]],
                    limits: [10, 15, 20, 25, 50, 100],
                    limit: 15,
                    page: false,
                    done: function (res) {
                        if (res.code == -1) {
                            window.location = '../login-1.html';
                        }
                    }
                });
            }


            //判断类型 
            if (report_type == 16) {
                GIS();
                $('#Myloading').remove();
                $('#img_dynamic').attr('src', './GIS.png')
            } else if (report_type == 5) {
                transFormer();
                $('#Myloading').remove();
                $('#img_dynamic').attr('src', './BY.png');
            } else if (report_type == 12) {
                Arrester();
                $('#Myloading').remove();
                $('#img_dynamic').attr('src', './BL.png')
            } else if (report_type == 53) {
                open_gui();
                $('#Myloading').remove();
                $('#img_dynamic').attr('src', './GIS.png')
            }


            function GIS() {
                optionTA = {
                    title: {
                        text: 'GIS状态评估报告',
                        x: 'right',
                        bottom: 0,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right'
                        // data: [' ',' ']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '66%',
                            center: ['50%', '40%'],
                            data: [
                                { name: '#1主变A相GIS断路器', value: 28 },
                                { name: '#1主变A相GIS闸刀', value: 12 },
                                { name: '#1主变A相GIS电流互感器', value: 12 },
                                { name: '#1主变A相GIS电压互感器', value: 12 },
                                { name: '#1主变A相GIS避雷器', value: 12 },
                                { name: '#1主变A相GIS高压套管', value: 12 },
                                { name: '#1主变A相GIS母线', value: 12 }
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                echartsBY.setOption(optionTA);
            }
            function transFormer() {
                option = {
                    title: {
                        text: '变压器状态评估报告',
                        x: 'right',
                        bottom: 0,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right'
                        // data: [' ',' ']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '66%',
                            center: ['50%', '50%'],
                            data: [{ value: 20, name: '油箱' },
                            { value: 20, name: '套管' },
                            { value: 10, name: '非电量保护' },
                            { value: 10, name: '分接开关' },
                            { value: 10, name: '冷却系统' },
                            { value: 10, name: '铁芯及磁回路' },
                            { value: 10, name: '绕组' },
                            { value: 10, name: '绝缘油' }],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                echartsBY.setOption(option);
            }
            function Arrester() {
                option = {
                    title: {
                        text: '避雷器状态评估报告',
                        x: 'right',
                        bottom: 0,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right'
                        // data: [' ',' ']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '66%',
                            center: ['50%', '50%'],
                            data: [{ value: 60, name: '#1主变A相避雷器本体' },
                            { value: 40, name: '#1主变A相避雷器在线检测装置' }],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                echartsBY.setOption(option);
            }
            function open_gui() {
                option = {
                    title: {
                        text: '开关柜状态评估报告',
                        x: 'right',
                        bottom: 0,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right'
                        // data: [' ',' ']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '66%',
                            center: ['50%', '50%'],
                            data: [{ value: 25, name: '开关柜本体' }, { value: 10, name: 'sf6' }, { value: 10, name: '电流互感器' }, { value: 10, name: '避雷器' }, { value: 10, name: '隔离开关' }, { value: 10, name: '母线桥' }, { value: 15, name: '设备缺陷' },
                            { value: 10, name: '电压互感器' }],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                echartsBY.setOption(option);
            }

        });


    </script>
</body>

</html>